<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="bootstrap 4, premium, multipurpose, ecommerce, html5, CSS" />
<meta name="description" content="Bootstrap 4 Landing Page Template" />
<meta name="author" content="www.themesground.com" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
  <link rel="shortcut icon" href="../assets/images/pagepig.ico" />

  <link href="../assets/css/theme-plugin.css" rel="stylesheet" />
  <link href="../assets/css/theme.min.css" rel="stylesheet" />

</head>

<body>
<!-- 引入head -->
<div class="head"></div>

<div class="page-wrapper">
  <div id="ht-preloader">
    <div class="loader clear-loader"> <img class="img-fluid" src="../assets/images/loader.gif" alt=""> </div>
  </div>
  <section class="bg-light py-4">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-6">
          <h1 class="h2 mb-0">商品列表</h1>
        </div>
        <div class="col-md-6 mt-3 mt-md-0">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-md-end bg-transparent p-0 m-0">
              <li class="breadcrumb-item"><a class="link-title" href="http://127.0.0.1:8888/page/index.html">首页</a>
              </li>
              <li class="breadcrumb-item active text-primary" aria-current="page">商品列表</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </section>
  <div class="page-content">
    <section>
      <div class="container">
        <div class="row mb-4 align-items-center">
          <!--展示商品总条数位置-->
          <div class="col-md-5 mb-3 mb-md-0"> <span class="text-muted" id="goodsTotal"></span></div>
          <div class="col-md-7 d-flex align-items-center justify-content-md-end">
            <div class="view-filter"> <a class="active" href="#"><i class="las la-th-large"></i></a>
                  <a href="#"><i class="las la-bars"></i></a>
            </div>
            <div class="sort-filter ml-2 d-flex justify-content-end">
              <select class="custom-select" id="selectPageSize" onchange="getObject()">
                <option selected value="12">展示12条数据</option>
                <option value="16">展示16条数据</option>
                <option value="20">展示20条数据</option>
              </select>
            </div>
          </div>
        </div>
        <!--商品展示位置-->
        <div class="row" id="goodsList">
          <div class="col-lg-3 col-md-6 mb-5">
            <div class="card product-card card--default rounded-0">

            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <nav aria-label="Page navigation">
              <ul class="pagination justify-content-center" id="pageUI">
                <li class="page-item"><a class="first page-link ">首页</a></li>
                <li class="page-item"><a class="pre page-link">上一页</a></li>
                <li class="page-item"><a class="next page-link">下一页</a></li>
                <li class="page-item"><a class="last page-link">尾页</a></li>
                <li class="page-item"><a class="pageCurrent page-link">当前页(1)</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </section>
  </div>

<div class="scroll-top"><a class="smoothscroll" href="#top"><i class="las la-angle-up"></i></a></div>
<!-- 引入footer -->
<div class="footer"></div>

<script src="../assets/js/jquery-3.5.1.min.js"></script> <script src="../assets/js/popper.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<!--<script src="../assets/js/owl.carousel.min.js"></script>-->
<script src="../assets/js/light-slider.js"></script>
<script src="../assets/js/parallax.js"></script>
<script src="../assets/js/magnific-popup.min.js"></script>
<script src="../assets/js/jquery.countdown.min.js"></script>
<script src="../assets/js/jquery.dd.min.js"></script>
<script src="../assets/js/validator.js"></script>
<script src="../assets/js/wow.js"></script>
<script src="../assets/js/theme-script.js"></script>
</div>
</body>
<script>

  $(function () {
    getObject();
    $("#pageUI").on("click",".first,.pre,.next,.last",doJumpToPage);
  });

  //获取数据库数据
  function getObject() {
    $("#goodsList").empty();
    //获取是否存在绑定数据
    let pageCurrent =$("#goodsTotal").data("pageCurrent");
    //不存在则认为页面是第一次加载
    if (pageCurrent == undefined) {
      pageCurrent = 1;
    }
    let pageSize = $('select option:selected').val();
    //如果没有获取到pageSize的值则默认展示12条数据
    if (pageSize == undefined) {
      pageSize = 12;
    }
    let categoryId = localStorage.getItem("categoryId");
    if (categoryId == null || categoryId == undefined) {
      categoryId = -1;
    }
    let title = localStorage.getItem("title");
    $.ajax({
      url:"/goods/doFindAllGoods",
      type:"GET",
      data:{
        "title":title,
        "categoryId":categoryId,
        "pageCurrent":pageCurrent,
        "status":1,
        "pageSize":pageSize
      },
      success:(result)=>{
        if (result.status === 200) {
          let records = result.data.records;
          //创建商品表格
          creatDiv(records);
          //计算显示数据条数
          let showGoods = result.data.pageCurrent*result.data.pageSize;
          //获取总条数
          let rowCount = result.data.rowCount;
          if (showGoods > rowCount) {
            showGoods = rowCount;
          }
          let str = "共"+rowCount+"条数据,已显示"+showGoods+"条数据";
          $(".pageCurrent").html("第"+pageCurrent+"页");
          $("#goodsTotal").data("pageCurrent",pageCurrent).data("pageCount",result.data.pageCount).html(str);
        }else{
          $("#goodsList").append("<span style='text-align: center'>"+result.message+"</span>");
        }
      }
    });
  }

  function creatDiv(records) {
    for (let i = 0; i < records.length; i++) {
      let data = records[i];
      let imgArr = data.img.split(",");
      let str = "<div class='col-lg-3 col-md-6 mb-5'>"+
              "<div class='card product-card card--default rounded-0'>"+
              "<a class='card-img-hover d-block'  id='hiddenId' value='"+data.id+"' href='/goods/"+data.id+"'>"+
              "<img class='card-img-back'id='itemImg' value='"+imgArr[0]+"'  src='"+imgArr[0]+"' alt='...'>"+
              "<img class='card-img-front' src='"+imgArr[1]+"' alt='...'>" +
              "</a>"+
              "<div class='card-info'>" +
              "<div class='card-body'>"+
              "<div class='product-title font-w-5'>" +
              "<a class='link-title'  id='title' value='"+data.title+"'>"+data.title+"</a>" +
              "</div>" +
              "<div class='mt-1'>"+
              "<span class='product-price text-pink' id='itemPrice' value='"+data.price+"'>"+data.price+"</span>" +
              "<div class='star-rating'>" +
              "<i class='las la-star'></i><i class='las la-star'></i><i class='las la-star'></i><i class='las la-star'></i><i class='las la-star'></i></div></div></div>"+
              "<div class='card-footer bg-transparent border-0'>"+
              "<div class='product-link d-flex align-items-center justify-content-center'>"+
              "<button class='btn-cart btn btn-pink mx-3' type='button' onclick='addCart()'>"+
              "<i class='las la-shopping-cart mr-1'></i> 添加购物车</button></div></div></div>";
      $("#goodsList").append(str);
    }
  }

  //分页的实现
  function doJumpToPage() {
    //获取绑定数据-当前页面
    let pageCurrent = $("#goodsTotal").data("pageCurrent");
    let pageCount = $("#goodsTotal").data("pageCount");
    // console.log(pageCount);
    let cls = $(this).prop("class");
    if (cls.indexOf("first") >= 0) {
      pageCurrent =1;
    }else if (cls.indexOf("pre") >= 0 && pageCurrent>1) {
      pageCurrent--;
    }else if (cls.indexOf("next") >= 0 && pageCurrent<pageCount) {
      pageCurrent++;
    }else if (cls.indexOf("last") >= 0) {
      pageCurrent = pageCount;
    }else{
      return;
    }
    //存储当前的页码值
    $("#goodsTotal").data("pageCurrent",pageCurrent);
    //进行刷新
    getObject();
  }

  /*添加购物车*/
  function addCart(){
    let itemId =document.getElementById("hiddenId").getAttribute("value");
    let itemNum =1;
    let title=document.getElementById("title").getAttribute("value");
    let itemPrice0=document.getElementById("itemPrice").getAttribute("value");
    let itemPrice=(itemPrice0*100).toFixed(0);
    let itemImg =document.getElementById("itemImg").getAttribute("value");
    $.ajax({
      url:"/page/addCartByUserName",
      type:"get",
      data:{itemId:itemId,num:itemNum,itemPrice:itemPrice,itemTitle:title,itemImage:itemImg},
      contentType:"application/x-www-form-urlencoded; charset=utf-8",
      dataType:"json",
      success:function (data){
        if (data.status==200){ alert("添加购物车成功");}
        else{
          alert(data.msg);
          window.location.href = '/page/login.html';
        }
      }
    })
  }

</script>
<script type="text/javascript">
  //在js中引入head与footer
  $(document).ready(function () {
    $('.head').load('head.html');
    $('.footer').load('footer.html');
  });
</script>
</html>
